<template>
  <el-dialog
    :title="!dataForm.id ? '光谱曲线' : '光谱曲线'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div class="mod-demo-echarts">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card>
            <div id="positive" class="chart-box"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0
      },
      xData: [],
      yData: [],
      chartLinePositive: null
    };
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLinePositive) {
      this.chartLinePositive.resize();
    }
  },
  methods: {
    // 初始化图形
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/getOneAmplitude"),
        method: "get",
        params: this.$http.adornParams({
          id: this.dataForm.id
        })
      }).then(({ data }) => {
        this.xData = data.xData;
        this.yData = data.yData;
        console.log(this.xData);
        console.log(this.yData);
        this.initChart();
      });
    },
    initChart() {
      var option = {
        title: {
          text: "正向光谱"
        },
        tooltip: {
          trigger: "axis"
        },

        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              //yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 10,
            end: 70,
            handleSize: 8,
            left: "100%"
          },
          {
            type: "inside",
            start: 10,
            end: 70
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            start: 0,
            end: 100,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "100%"
          }
        ],
        xAxis: {
          type: "category",
          data: this.xData,
          name: "波长(nm)",
          nameLocation: "middle",
          nameGap: 22
        },
        yAxis: {
          type: "value",
          name: "幅度",
          min: -10000,
          max: 60000
        },
        series: [
          {
            data: this.yData,
            type: "line"
          }
        ]
      };
      this.chartLinePositive = echarts.init(
        document.getElementById("positive")
      );
      this.chartLinePositive.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLinePositive.resize();
      });
    }
  }
};
</script>
<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }

  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 400px;
  }
}
</style>
